@import '~ant-design-vue/dist/antd.less';

@input-height-base: 38px;
@modal-body-padding: 0;
.text-align-right {
  text-align: right;
}
.ant-calendar-range-picker-input{
  height: auto;
}
.ant-modal-footer {
  text-align: center;
}

.border {

}
.ant-table-scroll {
  word-break: break-all;
}
/*全局样式*/
.ant-layout {
  background: #E3E9F4;
}
.ant-select-selection__placeholder{
  line-height:38px
}
.detailsBox {
  margin: 20px 40px 10px;
  border-collapse: collapse;
  box-sizing: border-box;
  width: calc(100% - 80px);
  line-height: 28px;

  .detailstag {
    box-sizing: border-box;
    border: 1px solid #cfd9e5;

    .title {
      width: 23%;
      padding: 10px;
      border: 1px solid #cfd9e5;
      box-sizing: border-box;
      background: #f2f6ff;
    }

    .content {
      padding: 10px;
      box-sizing: border-box;
      border: 1px solid #cfd9e5;
    }
  }
}

.ant-layout.ant-layout-has-sider > .ant-layout {
  overflow: hidden
}

.ant-btn {
  height: 38px;
  line-height: 38px;
  padding: 0 7px;
}

.box_bg {
  background-image: linear-gradient(180deg,
  #ffffff 0%,
  #f4f7ff 45%,
  #f4f7ff 100%),
  linear-gradient(#ffffff,
  #ffffff);
  background-blend-mode: normal,
  normal;
  box-shadow: 0px 2px 8px 0px rgba(58, 109, 189, 0.3);
  border-radius: 4px;
  height: calc(100% - 85px);
}

.pdd {
  padding: 16px 16px 0 16px;
}

.lanjian-content {
  color: #333;

  .formbox .ant-form-item-label {
    height: 28px;
    font-weight: 700;
  }

  p {
    margin-bottom: 0;
  }

  .ant-table {
    color: #333;
  }


  .disabled {
    background-color: #ebebeb !important;
    pointer-events: none;
    color: #9AA4B3 !important;
  }

  .ant-btn[disabled] {
    background-color: #ebebeb !important;
    color: #9AA4B3 !important;
    border: 1px solid #ebebeb !important;
  }

  // 下拉框最大高度 300px
  .ant-select-dropdown {
    max-height: 300px;
    overflow: auto;
  }

  .ant-input {
    font-size: 18px !important;
    color: #333;
  }

  .ant-radio-inner::after {
    top: 4px !important;
    left: 4px !important;
  }

  /*
      按钮样式 字体大小均为18px
      一级按钮高度为38px
      二级按钮高度34px
  */

  .ant-btn span {
    font-size: 18px;
  }

  .ant-btn .icon {
    font-size: 22px;
  }

  .ClassA {
    height: 38px !important;
    line-height: 38px;
    vertical-align: bottom;
  }

  .ClassB {
    height: 34px !important;
  }

  .ant-btn.resBtn {
    color: #697a95;
  }

  .inputBtnBox .ant-btn {
    height: 38px;
    background-color: #2377ff;
    color: #fff;
  }

  /*
      表格
      表头字体18px 白色  加粗   行高28px 行颜色 #73abf4'
      列表字体18px 行高28px 操作列字体18px 删除按钮颜色 #f4274a
  */

  /*  .ant-table {
      height: calc(100vh - 265px);
    }*/

  .ant-table-row td:empty:after, .ant-table-row td span:empty:after {
    content: '--';
  }


  .ant-table-thead, .ant-table-tbody {
    font-size: 18px;
    line-height: 28px;
  }

  .ant-table-tbody .actionIcons span {
    width: 34px;
    height: 34px;
    line-height: 34px;
    background: #e0eeff;
    color: #2377ff;
    margin-right: 8px;
    border-radius: 2px;
    padding: 0;
    text-align: center;
    display: inline-block;
    cursor: pointer
  }

  .iconfont {
    font-size: 22px;
    width: 100%;
    height: 100%;
    display: inline-block;
  }

  .ant-table-tbody .actionIcons .remove {
    background-color: #f9e2e9;
    color: #f4274a;

    i {
      color: #f4274a;
    }
  }

  .ant-table-tbody .ops_btnOne span:before {
    content: "";
  }

  .ant-table-tbody .ant-table-row:nth-child(2n) {
    background: #F2F6FF;
  }

  .ant-table-thead tr th {
    background-color: #73abf4;
  }

  .ant-table-thead th span {
    font-weight: bold;
    color: #fff;
  }

  .ant-table-thead > tr > th, .ant-table-tbody > tr > td {
    padding: 14px 16px;
  }

  .ant-table-bordered .ant-table-thead > tr > th, .ant-table-bordered .ant-table-tbody > tr > td {
    border-right: 1px solid #CFD9E5;
  }

  .ant-table-bordered .ant-table-header > table, .ant-table-bordered .ant-table-body > table, .ant-table-bordered .ant-table-fixed-left table, .ant-table-bordered .ant-table-fixed-right table {
    border: 1px solid #CFD9E5;
    border-right: none;
  }

  .ant-table-tbody > tr > td {
    border-bottom: 1px solid #CFD9E5;
  }

  .ant-table-bordered .ant-table-tbody > tr:last-child td {
    border-bottom: none;
  }

  /* 表头搜索栏 间距8px  输入框下拉框宽度260px 高度38px */

  .tableOperator {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
  }

  .m-r-8 {
    margin-right: 8px !important;
  }

  .m-r-4 {
    margin-right: 4px !important;
  }

  .ant-form-item-control-wrapper {
    text-align: left;
  }

  .formbox {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: flex-start;
    padding: 20px 40px 0;
    word-break: break-all;
    box-sizing: border-box;

    .formtab {
      width: 48%;
      min-height: 40px;
      margin-bottom: 12px;
      align-content: flex-start;

      .ant-form-item-label {
        padding: 0;
      }
    }

    .formtabMax {
      width: 100%;
      min-height: 40px;
      margin-bottom: 12px;

      .ant-form-item-label {
        padding: 0;
      }
    }

    .suffixName {
      display: inline-block;
      background-color: #f5f5f5;
      padding: 0 10px;
      line-height: 36px;
      border-radius: 4px;
      border: solid 1px #d9d9d9;
      width: 38px;
      position: relative;
      left: 0px;
      top: -1px;
    }

    .ant-form-item-label {
      height: 28px;
      font-weight: bold;
    }

    .ant-calendar-picker-clear, .ant-calendar-picker-icon {
      top: 41%;
    }

    textarea.ant-input {
      width: 100%;
      resize: none;
      height: 100px;
    }

    .ant-input, .ant-input-number, .ant-calendar-picker {
      width: 100%;
      height: 38px;
      font-size: 18px !important;

      .ant-input-number-input {
        height: 38px;
        line-height: 38px;
      }
    }

    .ant-select {
      width: 100%;
      font-size: 18px !important;

      .ant-select-selection--single {
        height: 38px;
        top: -2px;
      }

      .ant-select-selection__placeholder {
        height: 38px;
        line-height: 38px;
        top: 9px;
      }
    }

    .ant-radio-button-wrapper {
      height: 34px;
    }

    .ant-select-selection--multiple {
      min-height: 38px;
      padding: 0;

      .ant-select-selection__rendered {
        line-height: 38px;
        margin-bottom: 0;
      }
    }

    .ant-select-selection--multiple > ul > li, .ant-select-selection--multiple .ant-select-selection__rendered > ul > li {
      margin: 3px;
    }
  }

  .ant-input, .ant-input-number {
    height: 38px;

    .ant-input-number-input {
      height: 38px;
      line-height: 38px;
    }
  }

  .ant-select {
    .ant-select-selection--single {
      height: 38px;
    }

    .ant-select-selection__placeholder {
      height: 38px;
      line-height: 38px;
      top: 9px;
    }
  }

  .tableOperator {
    .ant-input, .ant-input-number, .ant-calendar-picker, .ant-select {
      width: 260px;
      height: 38px;

      .ant-select-selection--single {
        height: 38px;
      }

      .ant-select-selection__placeholder {
        height: 38px;
        line-height: 38px;
        top: 9px;
      }

      .ant-input-number-input {
        height: 38px;
        line-height: 38px;
      }
    }

    .ant-select-selection__clear {
      font-size: 18px;
      top: 41%;
    }

    .ant-select-selection--multiple {
      height: 38px;
      padding: 0;
      overflow: auto;
    }

    .ant-select-selection__rendered {
      line-height: 36px;
      margin-bottom: 0;
      top: -1px;
    }
  }

  /* 时间框 */

  .tableOperator .ant-calendar-picker-input {
    width: 100%;
  }


  .ant-btn-primary {
    background-color: #2377ff !important;
  }

  .ant-upload {
    .ant-btn {
      background-color: #2377ff;
      color: #fff;
    }

    .ant-btn:focus {
      background-color: #2377ff;
      color: #fff;
    }

    .ant-btn:hover {
      background-color: #2377ff;
      color: #fff;
    }
  }

  .content-div .ant-select-selection__clear {
    font-size: 18px;
    top: 41%;
  }

  .tree-menu .ant-tree-checkbox-checked::after {
    top: 0;
    height: 18px;
  }

  // 表单样式 背景 白
  // lable和input换行显示
  // 单列360px宽度
  // 字体18px
  // 基本信息与表单样式不同 背景色 #ecf2fd
  // 查看页面呈列表状 边框色 #cfd9e5
  .ant-checkbox-checked .ant-checkbox-inner {
    background-color: #2377FF;
    border-color: #2377FF;
  }

  .ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
    background: #2377FF;
    border-color: #2377FF;
  }

  // 单列
  .singleRow {
    .information {
      margin: 20px 60px;

      .infotab {
        width: 100%;
      }
    }

    .formbox {
      padding: 20px 60px 0;

      .formtab {
        width: 100%;
      }
    }
  }

  // 三列
  .threeRow {
    .information {
      .infotab {
        width: 31%;
      }
    }

    .formbox {
      .formtab {
        width: 31%;
      }
    }

    .detailsBox {
      .detailstag {
        .title {
          width: 14.33%;
        }

        .content {
          width: 19%;
        }
      }
    }
  }

  // 四列
  .fourRow {
    .information {
      .infotab {
        width: 23%;
      }
    }

    .formbox {
      .formtab {
        width: 23%;
      }

      .formtabMax {
        width: 48.5%;
      }
    }

    .detailsBox {
      .detailstag {
        .title {
          width: 11.5%;
        }

        .content {
          width: 13.5%;
        }
      }
    }
  }

  // 媒体查询  电脑屏幕小于1600时，只有三列
  @media screen and (max-width: 1600px) {
    .fourRow {
      .information {
        .infotab {
          width: 31%;
        }
      }

      .formbox {
        .formtab {
          width: 31%;
        }

        .formtabMax {
          width: 100%;
        }
      }
    }
  }
}

.ant-row.ant-form-item {
  flex-wrap: wrap;
}

// tab样式
.ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-nav-container {
  height: 50px;
}

.ant-tabs-nav .ant-tabs-tab-active {
  text-shadow: none;
}

.ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab {
  height: 50px;
  font-weight: bold;
  line-height: 50px;
  padding: 0 24px;
}

.ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab-active {
  height: 50px;
  padding: 0 24px;
}

.ant-tabs-bar {
  padding: 0;
}

.ant-tabs-tab-unclosable {
  font-weight: bold;
}

.ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab {
  border: none;
  border-bottom: 1px solid #d9d9d9!important;
  background: #fff;
}

.ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab-active {
  border: none;
  background: #f0f6ff;
}

.ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab-active::after {
  display: block;
  content: '';
  position: absolute;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background-image: linear-gradient(90deg,
  #3263f3 0%,
  #1785fa 100%);
  left: 0;
  bottom: 0;
}

.pt8 {
  padding-top: 8px;
}
.cusFormBox {
  width: 1050px !important;
  //height: 730px;
  background-color: #ffffff;
  box-shadow: 0px 2px 20px 0px rgba(58, 109, 189, 0.3);
  border-radius: 4px;
  margin: 12px auto 0 auto;
}

.cio {
  width: 18px;
  height: 18px;
  margin-right: 4px;
  color: #73a8f6;
}

.loading-dots{
  width: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.loading-dots div{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #666666;
  animation:dotsLoding 0.8s ease-in-out alternate infinite;
}
.loading-dots div:nth-of-type(6){
  animation-delay: -0.2s;
}
.loading-dots div:nth-of-type(5){
  animation-delay: -0.4s;
}
.loading-dots div:nth-of-type(4){
  animation-delay:  -0.6s;
}
.loading-dots div:nth-of-type(3){
  animation-delay: -0.8s;
}
.loading-dots div:nth-of-type(2){
  animation-delay: -1s;
}
.loading-dots div:nth-of-type(1){
  animation-delay: -1.2s;
}
@keyframes dotsLoding{
  from{
    opacity: 1;
  }
  to{
    opacity: 0;
  }
}
